html,
body {
	position: relative;
	width: 100vw;
	height: 100vh;
	color: white;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: black;
}

@font-face {
	font-family: twemoji;
	src: url("/css/TwemojiMozilla.ttf");
}

*,
*::before,
*::after {
	box-sizing: border-box;
	font-family: "Open Sans", "Noto Sans", twemoji, sans-serif;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
}

a {
	color: #00aff4;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

:focus {
	outline: none;
}

[data-separator].mentioned {
	background-color: #49443c;
}
[data-separator].mentioned.focus {
	background-color: #3c3831;
}

[data-separator]:not(.mentioned).focus {
	background-color: #32353b;
}

@media (min-width: 320px) {
	/* ===== Scrollbar CSS ===== */

	/* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {
		width: 5px;
	}

	*::-webkit-scrollbar-track {
		background: transparent;
	}

	*::-webkit-scrollbar-thumb {
		background-color: rgba(14, 14, 14, 0.4);
		border-radius: 20px;
	}
}

[data-folder]:not(.open) > * {
	display: none;
}
[data-folder]:not(.open) > *:nth-child(-n + 5):not(.hover) {
	display: inline-block;
	transform: scale(0.37);
	height: 17.76px;
	width: 17.76px;
}

[data-folder]:not(.open) {
	display: grid;
	--t: 18px 18px;
	grid-template-rows: var(--t);
	grid-template-columns: var(--t);
	grid-gap: 2px;
}
